import { h, VNode } from 'vue';
import { ElTableColumn } from 'element-plus';
// 通用表格行对象
export declare type TableRow<T> = {row: T, $index: number, column: {no: number}}
// 操作按钮的类
export interface OperateButton<T> {
  title: string | ((scope: TableRow<T>) => string) ;
  action: (scope: {row: T}) => any;
  isShow: boolean | ((scope: TableRow<T>) => boolean);
}

// 表格配置类
export interface TableColumnConfig<T>{
  label: string | (() => VNode);
  prop?: string;
  dom?: (scope: TableRow<T>) => VNode,
  fixed?: string,
  columnAlign?: 'left' | 'center' | 'right';
  width?: string | number,
  subColumn?: TableColumnConfig<T>[],
}

// 创造单行的el-column
export const createPerElTableColumn: <T>(config: TableColumnConfig<T>) => VNode = (config) => {
  if (!config.subColumn) {
    return <ElTableColumn width={config?.width} fixed={config?.fixed} align={config?.columnAlign}>
      {
        {
          header: typeof config.label === 'string' ? () => <div>{config.label}</div> : config.label,
          default: config.dom ? config.dom : null
        }
      }</ElTableColumn>;
  } else {
    return <ElTableColumn>
      {
        {
          header: typeof config.label === 'string' ? () => <div>{config.label}</div> : config.label,
          default: () => config.subColumn && config.subColumn.map(item => createPerElTableColumn(item))
        }
      }
    </ElTableColumn>;
  }
};
// 创造单行里面的操作列
export const createOperateActions: <T>(config: OperateButton<T>[], scope: TableRow<T>) => VNode[] = (config, scope) => {
  return config.filter(item => typeof item.isShow === 'function' ? item.isShow(scope) : item.isShow)
    .map(item =>
      <div v-waves class='wind-text-button' onClick={() => item.action(scope)}>
        {typeof item.title === 'string' ? item.title : item.title(scope)}
      </div>
    );
};

// 批量创造el-column
export const createElTableColumns = (config: TableColumnConfig<any>[]) => {
  return config.map(item => createPerElTableColumn(item));
};
